<template>
	<view class="container">
		<view class="top">
			<view class="seting"><image src="../../static/img/seting_icon.png" @click="showDrawer('showRight')"></image></view>
			<uni-drawer ref="showRight" mode="right" :width="350" @change="change($event,'showRight')">
				<view class="seting_title">
					<image src="../../static/img/left.png" @click="closeDrawer('showRight')"></image>
					<text>助手设置</text>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y scroll_view" @scrolltoupper="upper"
									@scrolltolower="lower" @scroll="scroll">
					<view class="channel">
						<view class="channel_left">
							<image src="../../static/img/s1.png"></image>
							<text @click="dialogToggle('info')">声音频道</text>
						</view>
						<!-- 提示窗示例 -->
						<uni-popup ref="alertDialog" type="dialog">
							<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="知道了" title="声音频道说明" content="如果有无法发出抢单成功提示音,或抢单提示音经常被其他声音打断地情况,在确定系统音量开启,无打开免打扰模式地情况,可以尝试切换成其他声音频道.建议使用闹钟频道(平时比较少用到)" @confirm="dialogConfirm"
								@close="dialogClose"></uni-popup-dialog>
						</uni-popup>
						<uni-data-select
							v-model="value"
							:localdata="range"
							@change="changeSelect"
						></uni-data-select>
					</view>
					
					<view class="success_tips">
						<view class="success_tips_title">
							<image src="../../static/img/s2_2.png"></image>
							<text>抢成功提示</text>
						</view>
						<view class="tips">
							<view class="tips_type">
								<view class="type_item">
									<image src="../../static/img/s3.png"></image>
									<text>专业模式</text>
								</view>
								<view class="type_item">
									<image src="../../static/img/s4.png"></image>
									<text>舒适模式</text>
								</view>
								<view class="type_item">
									<image src="../../static/img/s5.png"></image>
									<text>兼职模式</text>
								</view>
								<view class="type_item">
									<image src="../../static/img/s6.png"></image>
									<text>会议模式</text>
								</view>
							</view>
							<view class="waring">说明：播报两次+无限震动+铃音（适合全职、担心漏单的用户，强打扰）</view>
						</view>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left no">
							<image src="../../static/img/s2.png"></image>
							<text>语音报单次数</text>
						</view>
						<uni-data-select
							v-model="value"
							:localdata="range"
							@change="changeSelect"
						></uni-data-select>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/shake.png" style="width: 20px;height: 22px;"></image>
							<text>震动报单</text>
						</view>
						<uni-data-select
							v-model="value"
							:localdata="range"
							@change="changeSelect"
						></uni-data-select>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/abnormal.png" style="width: 20px;height: 22px;"></image>
							<text>铃音报单（后台提醒）</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/yichang.png" style="width: 22px;height: 23px;"></image>
							<text>平台异常语音报告</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/Gesture.png" style="width: 21px;height: 23px;"></image>
							<text>手势验证提示音</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/video.png" style="width: 21px;height: 23px;"></image>
							<text>删除单继续抢</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/video.png" style="width: 21px;height: 23px;"></image>
							<text>报空单继续抢</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/time.png" style="width: 21px;height: 23px;"></image>
							<text>全局定时器</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="xiumian">
						<view class="xiumian_left">
							<image src="../../static/img/slipe.png"></image>
							<text>定时休眠</text>
						</view>
						<view class="xiumian_center">
							<input v-model="xiumianStart" />
							<text> 至 </text>
							<input v-model="xiumianEnd" />
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/time_end.png" style="width: 22px;height: 23px;"></image>
							<text>休眠结束自动抢</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/time_end.png" style="width: 22px;height: 23px;"></image>
							<text>定时单闹钟</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/fuchuang.png" style="width: 22px;height: 22px;"></image>
							<text>后台悬浮窗</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/yichang.png" style="width: 22px;height: 22x;"></image>
							<text>使用新详情页</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
					
					<view class="channel nounderline">
						<view class="channel_left">
							<image src="../../static/img/shake2.png" style="width: 22px;height: 22px;"></image>
							<text>摇一摇停止声音及震动</text>
						</view>
						<image src="../../static/img/seting_uncheck.png" class="redio_check"></image>
					</view>
				</scroll-view>
			</uni-drawer>
			<view class="nav">
				<view class="nav_item">
					<image src="../../static/img/neiyouliulan.png"></image>
					<text>内游览器</text>
				</view>
				<view class="nav_item">
					<image src="../../static/img/today_order.png"></image>
					<text>今日订单</text>
				</view>
				<view class="nav_item">
					<image src="../../static/img/find_number.png"></image>
					<text>查号</text>
				</view>
				<view class="nav_item">
					<image src="../../static/img/prenvent_falling_line.png"></image>
					<text>防掉线</text>
				</view>
			</view>
		</view>
		<view class="tabs">
			<view class="tabs_timing">
				<text>定时中</text>
				<text>0</text>
			</view>
			<view class="tabs_timing">
				<text>工作中</text>
				<text>0</text>
			</view>
			<view class="tabs_success">
				<text>已成功</text>
				<text>0</text>
			</view>
			<view class="tabs_success">
				<text>异常</text>
				<text>0</text>
			</view>
			<view class="tabs_plant">
				<text>总站点</text>
				<text>0</text>
			</view>
		</view>
		<view class="list_container">
			<view class="add" @tap="goAddPlant">
				<image src="../../static/img/add_icon.png"></image>
				<text>添加站点</text>
			</view>
		</view>
		<div class="fixed_bottom">
			<view class="left_box">
				<image src="../../static/img/uncheck.png"></image>
				<text>0  /  6</text>
			</view>
			<view class="right_box">
				<view class="btn2">批量停止</view>
				<view class="btn1">批量启动</view>
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showRight: false,
				msgType: 'success',
				value: 0,
				range: [
					{ value: 0, text: "篮球" },
					{ value: 1, text: "足球" },
					{ value: 2, text: "游泳" },
				],
				xiumianStart:1,
				xiumianEnd:6,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		methods: {
			showDrawer(e) {
				this.$refs[e].open()
			},
			// 关闭窗口
			closeDrawer(e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			changeSelect(e) {
				console.log("e:", e);
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				console.log('点击确认')
			},
			dialogClose() {
				console.log('点击关闭')
			},
			upper: function(e) {
							//console.log(e)
			},
			lower: function(e) {
				//console.log(e)
			},
			scroll: function(e) {
				//console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
      goAddPlant(){
        uni.navigateTo({
        	url: '/pages/Site/Site',
          animationType: 'slide-in-right',
          	animationDuration: 200
        });
      }
		},
		onNavigationBarButtonTap(e) {
			if (this.showLeft) {
				this.$refs.showLeft.close()
			} else {
				this.$refs.showLeft.open()
			}
		},
		// app端拦截返回事件 ，仅app端生效
		onBackPress() {
			if (this.showRight || this.showLeft) {
				this.$refs.showLeft.close()
				this.$refs.showRight.close()
				return true
			}
		}
	}
</script>

<style>
@import "index.css";
</style>
